<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>速度中国工时系统</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
    <style>        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
    .layui-table-cell {
        overflow: visible !important;
    }

    /* 设置下拉框的高度与表格单元相同 */
    .layui-input, .layui-select, .layui-textarea {
        height: 30px !important;
    }

    .layui-layer-setwin .layui-layer-max {
        display: none;
    }
    </style>


</head>

<body>
<div class="kit-doc">

    <!--表格搜索框组-->
    <div class="layui-form-item layui-formgroup layui-tab-card">
        <!-- input输入框 -->
        <div class="layui-inline">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline">
                <input name="phone" lay-verify="required|phone" autocomplete="off"
                       class="layui-input" type="tel" id="searchContext1">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">真实姓名：</label>
            <div class="layui-input-inline">
                <input name="phone" lay-verify="required|phone" autocomplete="off"
                       class="layui-input" type="tel" id="searchContext">
            </div>
        </div>

        <!-- 按钮 -->
        <button class="layui-btn " id="searchBtn">搜索</button>
    </div>

    <div class="layui-card layui-card-body">
        <!-- 表格增删改查btn -->
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="modal1"><i class="fa fa-plus"></i>&nbsp;增加
            </button>
        </div>

        <table class="layui-table xuhao-table" id="table-context" lay-filter="test">
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
            </script>
        </table>
    </div>

</div>
<!-- 弹框content -->
<div id="modal-content1" style="display: none; padding:20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" required lay-verify="required"
                       placeholder="请输入登录名称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实名称</label>
            <div class="layui-input-block">
                <input type="text" name="userName" required lay-verify="required"
                       placeholder="请输入真实名称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required|pass"
                       autocomplete="off" class="layui-input" id="pwd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">重复输入密码</label>
            <div class="layui-input-block">
                <input type="password" name="repeatPassword" required lay-verify="required|sure"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <input name="deptId" type="hidden" id="treeId"/>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="deptName" onclick="selectDeptTree()"
                       lay-verify="required"
                       readonly="true" id="treeName">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email"
                       placeholder="请输入邮箱账户"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phonenumber"
                       placeholder="请输入手机号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verify="required" id="sex">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">岗位</label>
            <div class="layui-input-block">
                <select name="sex" lay-verify="required" id="post" multiple="">
                    <option th:each="post:${postList}" th:value="${post.getId()}"
                            th:text="${post.postName}"
                            th:disabled="${post.status == '1'}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select xm-select="role">
                    <option value=""></option>
                    <option th:each="role :${roleList}" th:value="${role.getId()}"
                            th:text="${role.roleName}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" id="remark"
                          class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!--状态模板-->
<script type="text/html" id="statusTpl">
    <input type="checkbox" name="sex" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用"
           readonly="readonly" disabled="disabled"
           lay-filter="status" {{ d.status== '0' ? 'checked' : '' }}>
</script>

<script src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js"
        th:src="@{/js/jquery.min.js}"></script>
<script src="/js/ry-ui.js"></script>
<!--<script src="" th:src="@{/plugins/layui/formSelects.js}"></script>-->
<!-- 表单 -->
<script>
    layui.config({
        base: '/plugins/layui/'    //此处写的相对路径, 实际以项目中的路径为准
    }).extend({
        formSelects: 'formSelects'
    });
    layui.use(['form', 'layedit', 'laydate', 'formSelects'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            formSelects = layui.formSelects;
        // formSelects.value('select', [1, 3]);

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

    });
</script>
<!--弹框-->
<script>
    $('#modal1').on('click', function () {
        layer.open({
            title: "内容添加",
            type: 1,
            content: $("#modal-content1"),
            area: ['40%', '60%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });
                window.location.reload();

            }
        });
    });</script>

<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.$;
        var userTable = table.render({
            elem: '#table-context'
            , url: '/system/user/list'
            , height: 'full-200'
            , page: true
            , limit: 10
            , limits: [10, 20, 30]
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [
                [
                    // {field: 'id', title: '用户id', sort: true, align: 'center', width: 200},
                    {field: 'loginName', title: '登录名', align: 'center'}
                    , {field: 'userName', title: '真实姓名', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'email', title: '邮箱地址', align: 'center'}
                    , {field: 'phonenumber', title: '电话号码', align: 'center'}
                    , {field: 'status', title: '状态', align: 'center', templet: '#statusTpl'}
                    , {field: 'remark', title: '标识', align: 'center'}
                    , {fixed: 'right', align: 'center', toolbar: '#barDemo'}
                ]
            ]
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确定删除当前用户？', function (index) {
                    console.log("当前行的数据为：" + data.id);
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    layui.$.ajax({
                        type: 'DELETE',
                        url: "/system/user/del/" + data.id,
                        success: function (res) {
                            // console.log(res);
                            layer.closeAll();
                            if (res.code == 0) {
                                layer.msg("删除成功");
                            } else {
                                layer.msg("修改失败" + data.msg);
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                // 编辑操作
                $.modal.open("用户修改", "/system/user/update/" + data.id);
            } else if (layEvent === 'reset') {
                layui.$.ajax({
                    type: 'PUT',
                    url: "/system/user/reset/" + data.id,
                    success: function (res) {
                        layer.closeAll();
                        if (res.code == 0) {
                            layer.msg("重置成功，新密码为123456");
                        } else {
                            layer.msg("重置失败" + data.msg);
                        }
                    }
                });
            }

        });
        // 查询
        $("#searchBtn").click(function () {
            userTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    userName: $("#searchContext").val(),
                    loginName: $("#searchContext1").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
    });

</script>
<script>
    //所有父级部门
    $(function () {
        $.ajax({
            type: "GET",//请求方式
            url: "/system/dept/getParentDept",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                for (var i = 0; i < result.length; i++) {
                    $("#parentdeptId").append("<option value='" + result[i].id + "'>" + result[i].deptName + "</option>");

                }
            }
        });

    });


    layui.use(['layer', 'element', 'form'], function () {
        var layer = layui.layer
            , element = layui.element
            , form = layui.form
            , $ = layui.jquery;
        form.on('select(selectChildren)', function (data) {
            var parentId = $("#parentdeptId").val();
            $.ajax({
                type: "GET",//请求方式
                url: "/system/dept/getChildrenDept?parentId=" + parentId,//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
                success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数

                    for (var i = 0; i < result.length; i++) {
                        $("#deptId").append("<option value='" + result[i].id + "'>" + result[i].deptName + "</option>");
                    }
                    //重新渲染
                    form.render();
                }
            });

        });

    });

</script>
<script>
    // 增加项目表单
    layui.use(['form', 'layedit', 'laydate', 'jquery', 'formSelects'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit,
            laydate = layui.laydate,
            formSelects = layui.formSelects;

        //常规用法
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
            , sure: function (value) {
                if (value != $("#pwd").val()) {
                    return '密码不一致,请重新输入';
                }
            }
        });
//自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        //监听指定开关
        form.on('switch(switchStatus)', function (data) {
            this.value = this.checked ? "0" : "1";
        });


        var $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            var userId = $("input[name='userId']").val();
            var deptId = $("input[name='deptId']").val();
            var loginName = $("input[name='loginName']").val();
            var userName = $("input[name='userName']").val();
            var password = $("input[name='password']").val();
            var email = $("input[name='email']").val();
            var phonenumber = $("input[name='phonenumber']").val();
            var sex = $("#sex option:selected").val();
            var status = $("input[name='status']").is(':checked') == true ? 0 : 1;
            var roleIds = formSelects.value('role', 'valStr');
            var postIds = $.form.selectSelects("post");
            $.ajax({
                type: 'POST',
                url: "/system/user/add",
                data: {
                    "userId": userId,
                    "deptId": deptId,
                    "loginName": loginName,
                    "userName": userName,
                    "password": password,
                    "email": email,
                    "phonenumber": phonenumber,
                    "sex": sex,
                    "status": status,
                    "roleIds": roleIds,
                    "postIds": postIds
                },
                success: function (res) {
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("新增成功");
                        layui.$("button[type=reset]").click();
                    } else {
                        layer.msg("新增失败" + res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
<script>
    /*用户管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = treeId == null || treeId == "" ? "100" : treeId;
        var url = "/system/dept/selectDeptTree/" + deptId;
        // layer.open("选择部门", url, '380', '380');
        layer.open({
            title: "选择部门",
            type: 2,
            content: url,
            area: ['22%', '45%'],
            shadeClose: true
        });
    }
</script>
</body>
</html>